<template>
  <common-card title="今日交易用户数" :value="orderUser|numberFormat">
    <template>
      <v-chart :option="getOption()" autoresize/>
    </template>
    <template v-slot:bottom>
      <span>退货率</span>
      <span class="emphasis">{{returnRate + '%'}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayUsers',

  computed: {
    ...mapState({
      "orderUser": state => state.data.reportData.orderUser,
      "returnRate": state => state.data.reportData.returnRate,
      "orderUserTrend": state => state.data.reportData.orderUserTrend || [],
      "orderUserTrendAxis": state => state.data.reportData.orderUserTrendAxis || [],
    })
  },

  methods: {
    getOption () {
      return {
        xAxis: {
          data: this.orderUserTrendAxis,
          show: false,
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: '实时交易量',
            type: 'bar',
            data: this.orderUserTrend,
            // barWidth: 10,
            barWidth: '50%',
          }
        ],

        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },

        color: '#3398DB',

        tooltip: {
          trigger: 'axis'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
